Css布局技巧-实现未知宽高元素网页水平和垂直居中

未知宽高网页元素实现水平和垂直居中对齐

如果网页中给一个已经知道宽高尺寸的元素设置水平和垂直居中,我相信大家都可以很简单的实现出来,参考代码如下:

.box{
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-100px;
    margin-left:-100px;
    width:200px;
    height:200px;
    background-color:red;
/*实现: 给元素设置绝对定位, left:50% , top:50% , 然后再设置外边距回去自身宽高的一半.    */
}

那如果是未知宽高 ,又该如何设置呢?

附上全部css样式代码:

<style>
    /*
        需求: 让box 再container中水平和垂直居中?
    */
    .container{
        position:relative;
        width:1000px;
        margin:0 auto;
        height:600px;
        border:1px solid red;
        }

    .box{

        /*已知宽高:
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;*/

        width:100px;
        height:100px;
        background-color:red;       
        }   

    #box1 .box{
        /*解决方案一 : 使用css3 位移 (IE9+) **/
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%); /*css3 中的位移:以自身宽高为参照 **/ 
        }

    #box2{
        /**解决方案二 : 使用css3 弹性盒子布局 : flex (IE10 +)**/
        display:flex;
        justify-content:center; /*水平居中*/

        }   
    #box2 .box{
        align-self:center;/*垂直居中**/
        }   

        /**解决方案三: 使用表格布局 (表格中单元格默认垂直居中) (IE8+)
            table  >  cell > 需要居中的盒子

        **/ 
    #box3{
        display:table;/*1.设置显示方式为 表格**/

        }
    #box3 .td{
        display:table-cell;/*2.设置显示为单元格 */
        text-align:center;/**3.设置显示为水平居中*/
        vertical-align:middle;/**4.设置显示为垂直居中*/
        }   
    #box3 .box{
        display:inline-block;/*5.设置显示为行内/行内块*/
        }       
</style>

附上全部 布局结构html 代码:

<div class="container" id="box1">
        <div class="box">方案1</div>
    </div>

    <div class="container" id="box2">
        <div class="box">方案2</div>
    </div>

     <div class="container" id="box3">
        <div class="td">
            <div class="box">方案3</div>
        </div>
    </div>